<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站配置规则生成器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .action-container {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            background-color: #f8f9fa;
        }
        .rule-container {
            border: 1px solid #e9ecef;
            padding: 10px;
            margin: 5px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        .delete-btn {
            color: #dc3545;
            cursor: pointer;
        }
        #result {
            font-family: monospace;
            white-space: pre-wrap;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
        }
        .example-btn {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
        }
        .modal-dialog {
            max-width: 800px;
        }
        .modal-body pre {
            max-height: 500px;
            overflow-y: auto;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin: 0;
        }
    </style>
</head>
<body>
    <!-- 示例按钮 -->
    <button class="btn btn-info example-btn" data-bs-toggle="modal" data-bs-target="#exampleModal">
        查看配置示例
    </button>

    <!-- 示例弹窗 -->
    <div class="modal fade" id="exampleModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">知乎问题页配置示例</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <pre id="exampleJson"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="copyExample()">复制示例</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <h2 class="mb-4">网站配置规则生成器</h2>
        
        <div class="mb-4">
            <label class="form-label">网站匹配规则</label>
            <input type="text" class="form-control" id="sitePattern" placeholder="输入网站匹配规则，例如: example.com">
        </div>

        <div class="mb-4">
            <label class="form-label">内容选择器（content）</label>
            <input type="text" class="form-control" id="contentSelector" placeholder="输入主要内容的CSS选择器" onchange="updateConfig()">
        </div>

        <div class="mb-4">
            <label class="form-label">网站说明（_note）</label>
            <input type="text" class="form-control" id="siteNote" placeholder="输入网站的说明信息" onchange="updateConfig()">
        </div>

        <div id="actionsContainer">
            <!-- 动作列表将在这里动态生成 -->
        </div>

        <button class="btn btn-primary mt-3" onclick="addAction()">添加动作</button>

        <div class="mt-4">
            <h4>生成的配置</h4>
            <div id="result" class="mt-2"></div>
            <button class="btn btn-success mt-2" onclick="copyConfig()">复制配置</button>
        </div>
    </div>

    <template id="actionTemplate">
        <div class="action-container">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <select class="form-select" style="width: auto;" onchange="updateActionFields(this)">
                    <option value="">选择动作类型</option>
                    <option value="wait">等待 (wait)</option>
                    <option value="scroll">滚动 (scroll)</option>
                    <option value="click">点击 (click)</option>
                    <option value="remove">移除 (remove)</option>
                    <option value="selectors">选择器 (selectors)</option>
                    <option value="screenshot">截图 (screenshot)</option>
                    <option value="clickByText">文本点击 (clickByText)</option>
                </select>
                <span class="delete-btn" onclick="deleteAction(this)">×</span>
            </div>
            <div class="action-fields">
                <!-- 动作特定的字段将在这里动态生成 -->
            </div>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 知乎问题页配置示例
        const exampleConfig = {
            "www.zhihu.com/question": {
                "_note": "知乎问题",
                "content": ".RichContent--unescapable",
                "actions": [
                    {
                        "type": "wait",
                        "selector": ".RichContent--unescapable",
                        "waitTime": 2000
                    },
                    {
                        "type": "remove",
                        "selectors": [
                            ".Comments-container div div"
                        ],
                        "remark": "移除评论区多余内容，因为会影响评论的截图"
                    },
                    {
                        "type": "selectors",
                        "rules": {
                            "author": { "selector": ".AuthorInfo-content", "attr": "text" },
                            "authorUrl": { "selector": ".AuthorInfo-content", "attr": "href" },
                            "title": { "selector": ".QuestionHeader-title", "attr": "text" },
                            "authorAvatar": { "selector": "img.AuthorInfo-avatar", "attr": "src" },
                            "date": { "selector": "div.ContentItem-time", "attr": "text" }
                        }
                    },
                    {
                        "type": "wait",
                        "selector": ".RichContent--unescapable",
                        "waitTime": 1000
                    }
                ]
            }
        };

        // 页面加载时显示示例
        window.addEventListener('DOMContentLoaded', () => {
            document.getElementById('exampleJson').textContent = JSON.stringify(exampleConfig, null, 2);
        });

        // 复制示例配置
        function copyExample() {
            navigator.clipboard.writeText(JSON.stringify(exampleConfig, null, 2)).then(() => {
                alert('示例配置已复制到剪贴板！');
            });
        }

        function addAction() {
            const template = document.getElementById('actionTemplate');
            const container = document.getElementById('actionsContainer');
            const clone = template.content.cloneNode(true);
            container.appendChild(clone);
            updateConfig();
        }

        function deleteAction(btn) {
            btn.closest('.action-container').remove();
            updateConfig();
        }

        function updateActionFields(select) {
            const container = select.closest('.action-container').querySelector('.action-fields');
            container.innerHTML = '';

            switch (select.value) {
                case 'wait':
                    container.innerHTML = `
                        <div class="mb-3">
                            <label class="form-label">选择器</label>
                            <input type="text" class="form-control" placeholder="CSS选择器" onchange="updateConfig()">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">等待时间 (ms)</label>
                            <input type="number" class="form-control" value="2000" onchange="updateConfig()">
                        </div>
                    `;
                    break;

                case 'click':
                case 'clickByText':
                    container.innerHTML = `
                        <div class="mb-3">
                            <label class="form-label">选择器</label>
                            <input type="text" class="form-control" placeholder="${select.value === 'click' ? 'CSS选择器' : '文本内容'}" onchange="updateConfig()">
                        </div>
                    `;
                    break;

                case 'remove':
                    container.innerHTML = `
                        <div class="mb-3">
                            <label class="form-label">选择器列表</label>
                            <div id="selectorsList">
                                <div class="input-group mb-2">
                                    <input type="text" class="form-control" placeholder="CSS选择器" onchange="updateConfig()">
                                    <button class="btn btn-outline-danger" onclick="this.parentElement.remove(); updateConfig()">删除</button>
                                </div>
                            </div>
                            <button class="btn btn-outline-primary btn-sm" onclick="addSelector(this)">添加选择器</button>
                        </div>
                    `;
                    break;

                case 'selectors':
                    container.innerHTML = `
                        <div class="mb-3">
                            <label class="form-label">规则列表</label>
                            <div id="rulesList">
                                <!-- 规则将在这里动态添加 -->
                            </div>
                            <button class="btn btn-outline-primary btn-sm" onclick="addRule(this)">添加规则</button>
                        </div>
                    `;
                    break;

                case 'screenshot':
                    container.innerHTML = `
                        <div class="mb-3">
                            <label class="form-label">选择器</label>
                            <input type="text" class="form-control" placeholder="CSS选择器" onchange="updateConfig()">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">文件名</label>
                            <input type="text" class="form-control" placeholder="screenshot.png" onchange="updateConfig()">
                        </div>
                    `;
                    break;
            }
            updateConfig();
        }

        function addSelector(btn) {
            const container = btn.previousElementSibling;
            const selectorHtml = `
                <div class="input-group mb-2">
                    <input type="text" class="form-control" placeholder="CSS选择器" onchange="updateConfig()">
                    <button class="btn btn-outline-danger" onclick="this.parentElement.remove(); updateConfig()">删除</button>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', selectorHtml);
            updateConfig();
        }

        function addRule(btn) {
            const container = btn.previousElementSibling;
            const ruleHtml = `
                <div class="rule-container">
                    <div class="mb-2">
                        <label class="form-label">规则名称</label>
                        <input type="text" class="form-control" placeholder="规则键名" onchange="updateConfig()">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">选择器</label>
                        <input type="text" class="form-control" placeholder="CSS选择器" onchange="updateConfig()">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">属性</label>
                        <select class="form-control" onchange="updateConfig()">
                            <option value="text">文本（text）</option>
                            <option value="html">HTML（html）</option>
                            <option value="href">链接（href）</option>
                            <option value="src">源地址（src）</option>
                        </select>
                    </div>
                    <div class="mb-2">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" onchange="updateConfig()">
                            <label class="form-check-label">多元素匹配</label>
                        </div>
                    </div>
                    <button class="btn btn-outline-danger btn-sm" onclick="this.parentElement.remove(); updateConfig()">删除规则</button>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', ruleHtml);
            updateConfig();
        }

        function updateConfig() {
            const config = {};
            const pattern = document.getElementById('sitePattern').value;
            if (!pattern) return;

            // 获取顶层配置
            const contentSelector = document.getElementById('contentSelector').value;
            const siteNote = document.getElementById('siteNote').value;

            const siteConfig = {};
            if (contentSelector) siteConfig.content = contentSelector;
            if (siteNote) siteConfig._note = siteNote;

            const actions = [];
            document.querySelectorAll('.action-container').forEach(container => {
                const actionType = container.querySelector('select').value;
                if (!actionType) return;

                const action = { type: actionType };

                switch (actionType) {
                    case 'wait':
                        const selector = container.querySelector('input[placeholder="CSS选择器"]').value;
                        const waitTime = container.querySelector('input[type="number"]').value;
                        if (selector) action.selector = selector;
                        if (waitTime) action.waitTime = parseInt(waitTime);
                        break;

                    case 'click':
                    case 'clickByText':
                        const clickSelector = container.querySelector('input[placeholder*="选择器"]').value;
                        if (clickSelector) action.selector = clickSelector;
                        break;

                    case 'remove':
                        const selectors = Array.from(container.querySelectorAll('#selectorsList input'))
                            .map(input => input.value)
                            .filter(Boolean);
                        if (selectors.length) action.selectors = selectors;
                        break;

                    case 'selectors':
                        const rules = {};
                        container.querySelectorAll('.rule-container').forEach(rule => {
                            const name = rule.querySelector('input[placeholder="规则键名"]').value;
                            const selector = rule.querySelector('input[placeholder="CSS选择器"]').value;
                            const attr = rule.querySelector('select').value;
                            const multi = rule.querySelector('input[type="checkbox"]').checked;

                            if (name && selector) {
                                rules[name] = {
                                    selector,
                                    attr,
                                    multi
                                };
                            }
                        });
                        if (Object.keys(rules).length) action.rules = rules;
                        break;

                    case 'screenshot':
                        const screenshotSelector = container.querySelector('input[placeholder="CSS选择器"]').value;
                        const filename = container.querySelector('input[placeholder="screenshot.png"]').value;
                        if (screenshotSelector) action.selector = screenshotSelector;
                        if (filename) action.filename = filename;
                        break;
                }

                actions.push(action);
            });

            siteConfig.actions = actions;
            config[pattern] = siteConfig;
            document.getElementById('result').textContent = JSON.stringify(config, null, 2);
        }

        function copyConfig() {
            const result = document.getElementById('result').textContent;
            navigator.clipboard.writeText(result).then(() => {
                alert('配置已复制到剪贴板！');
            });
        }

        // 初始化时添加事件监听
        document.getElementById('sitePattern').addEventListener('input', updateConfig);
    </script>
</body>
</html>
